<!-- 页面主结构代码 -->
<template>
    <div class="add-product">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="product-class">
                    <p class="header">产品类型列表</p>
                    <TreeProduct @getTreeData="getTreeData"></TreeProduct>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="edit-product">
                    <p class="product-header">商品</p>
                    <div class="edit-product-form">
                        <el-form :model="product_form" label-width="auto" style="max-width: 600px" :rules="rules"
                            status-icon>
                            <el-form-item label="所属分类">
                                <el-input v-model="product_form.category" />
                            </el-form-item>
                            <el-form-item label="商品名称" props="name">
                                <el-input v-model="product_form.name" />
                            </el-form-item>
                            <el-form-item label="商品价格">
                                <el-input v-model="product_form.price" />
                            </el-form-item>
                            <el-form-item label="商品数量">
                                <el-input v-model="product_form.num" />
                            </el-form-item>
                            <el-form-item label="商品卖点">
                                <el-input v-model="product_form.sellpoint" />
                            </el-form-item>
                            <el-form-item label="上传图片">
                                <UploadImg @sendImgUrl="sendImgUrl"></UploadImg>
                            </el-form-item>
                            <el-form-item label="商品描述">
                                <WangEditor></WangEditor>
                                <!-- <el-input v-model="product_form.desc" /> -->
                            </el-form-item>
                            <el-form-item label="首页轮播">
                                <el-switch v-model="swipper" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script setup>
import TreeProduct from './TreeProduct.vue'
import WangEditor from './WangEditor.vue'

import { reactive } from 'vue'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import UploadImg from './UploadImg.vue'

const fileList = ref([])
const swipper = ref(true)
const handleRemove = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
    console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
    )
}

const beforeRemove = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}

// do not use same name with ref
const product_form = reactive({
    category: '',
    name: '',
    num: '',
    cid: '',
    prices: '',
    sellpoint: '',
    desc: '',
    is_swipper: true,
    images: [],
})

const rules = reactive({
    name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ]
})

const onSubmit = () => {
    console.log('submit!')
}

const data = [
    {
        label: '水果类',
        cid: '0',
        category: '水果类',
        children: [
            {
                label: '苹果',
                cid: '1',
                category: '水果类',
                children: [
                    {
                        label: '红富士',
                        cid: '2',
                        name: '红富士',
                        category: '水果类',
                    },
                ],
            },
        ],
    },
    {
        label: '蔬菜类',
        cid: '1',
        children: [
            {
                label: '青菜',
                children: [
                    {
                        label: '白菜',
                        cid: '1',
                        name: '白菜',
                    },
                ],
            },
            {
                label: '西红柿',
                children: [
                    {
                        label: '番茄',
                        cid: '1',
                        name: '白菜',
                    },
                ],
            },
        ],
    },
    {
        label: '海鲜类',
        children: [
            {
                label: '鱼类',
                children: [
                    {
                        label: '鲸鱼',
                    },
                ],
            },
            {
                label: '虾类',
                children: [
                    {
                        label: '皮皮虾',
                    },
                ],
            },
        ],
    },
]

const getTreeData = (val) => {
    console.log("test-->", val)
    product_form.category = val.category
}

const sendImgUrl = (val) => {
    product_form.images.push(val);
}
</script>

<style lang="scss" scoped>

.el-tree {
    background-color: #fefefe;
    width: 200px;
    color: black;
}

.add-product {
    display: flex;
    justify-content: left;

    .product-class {
        .header {
            margin-top: 0px;
            background-color: blue;
            color: white;
            align-content: center;
            height: 50px;
            margin-bottom: 0px;
            padding-left: 10px;
        }
    }

    .edit-product {
        width: 600px;
        margin: 0 20px;
        background-color: white;

        .product-header {
            margin-top: 0px;
            background-color: blue;
            padding-left: 10px;
            height: 50px;
            align-content: center;
            color: white;
        }

        .edit-product-form {
            padding: 0 20px 10px 20px;
        }
    }
}
</style>

